const path = require('path')

//1. 通过require方法得到一个构造函数
const HtmlPlugin = require('html-webpack-plugin')

//2. 通过HtmlPlugin构造函数new出一个对象, 指定源文件路径和映射文件路径
const htmlPlugin = new HtmlPlugin({
    template: './resource/index.html',
    filename: './index.html'
})

const {CleanWebpackPlugin} = require('clean-webpack-plugin');

const cleanPlugin = new CleanWebpackPlugin()


module.exports = {
    mode: 'development',
    devtool: 'eval-source-map',
    entry: path.join(__dirname, './src/index.js'), // 设置入口文件

    output: {
        filename: 'js/bundle.js', // 指定输出的文件
        path: path.join(__dirname, './dist'), // 指定输出的路径
    },

    //3.通过plugins节点挂载插件htmlPlugin
    plugins: [htmlPlugin, cleanPlugin],

    //配置映射ip端口, 以及是否在webpack命令运行时自动打开浏览器并访问映射url
    devServer: {
        open: true,
        host: '127.0.0.1',
        port: 80
    },
    module: {
        rules: [
            //对于webpack无法处理的文件(比如以css文件结尾的文件),使用正则表达式匹配, 使用对应的loader去处理, 从后向前处理css-loader->style-loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            {test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']},
            {
                test: /\.png$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: false,
                        esModules: true,
                        outputPath: 'image',
                        name: '[name].[ext]'
                    }
                },
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-withimg-loader'
                }
            }
            // {
            //     test: /\.js$/,
            //     exclude: /node_modules/,
            //     use: {
            //         loader: "babel-loader",
            //         options: {
            //             plugins: ['@babel/plugin-proposal-class-properties']
            //         }
            //     }
            // }
        ]
    }

}


